<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>系统-任务</title>

    <link rel="stylesheet" href="../../plugins/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="../../adminLTE/css/adminlte.min.css">
    <link rel="stylesheet" href="../css/cloud.css">

    <style>
        .detail-content {
            background-color: #f0f0f0;
            min-height: 8em;
            display: block;
            width: 100%;
            border-width: 0;
            border-radius: 5px;
        }
    </style>
</head>
<body class="content-wrapper" style="padding: 15px">
<!--顶部条-->
<div style="padding: 0 7px 15px 7px" class="clearfix">
    <!--搜索输入框组-->
    <div class="input-group pull-left" style="width: 50%">
        <input id="keyword" class="form-control" type="search" placeholder="关键字">
        <div class="input-group-append">
            <button id="search" class="btn btn-info btn-flat"><i class="fa fa-search"></i></button>
        </div>
    </div>
</div>
<!--数据展示-->
<div class="container-fluid">
    <table id="table" class="table table-sm table-hover table-bordered">
        <thead><tr>
            <th style="width: 2em">#</th>
            <th>名称</th>
            <th style="width: 4em">状态</th>
            <th>描述</th>
            <th>开始时间</th>
            <th>结束时间</th>
            <th>耗时(秒)</th>
            <th style="width: 6em">责任人</th>
            <th style="width: 4em">操作</th>
        </tr></thead>
        <tbody><tr>
            <td>{{index}}</td>
            <td>{{name}}</td>
            <td><span class="badge {{statusClass}}">{{status}}</span></td>
            <td style="word-break: break-all">{{description}}</td>
            <td>{{startDate}}</td>
            <td>{{finishDate}}</td>
            <td>{{cost}}</td>
            <td>{{owner}}</td>
            <td>
                <button class="btn btn-xs btn-outline-info detail" data-id="{{id}}">
                    <i class="fa fa-comment-o"></i> 详情
                </button>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<!--加载更多-->
<div id="load-more" class="text-sm-center text-primary" style="display: none;">
    <span style="cursor: pointer"><i class="fa fa-hand-o-right"></i> 点击加载更多数据</span>
</div>
<!--正在加载-->
<div id="loading" class="text-sm-center text-gray" style="display: none;">
    <span><i class="fa fa-refresh fa-spin"></i> 正在加载...</span>
</div>
<!--全部加载-->
<div id="load-all" class="text-sm-center text-success" style="display: none;">
    <i class="fa fa-info-circle"></i> 已加载全部数据
</div>
<!--加载失败-->
<div id="load-error" class="text-sm-center text-danger" style="display: none;">
    <i class="fa fa-exclamation-triangle"></i> 加载失败
</div>
<script src="../../plugins/jquery/jquery.min.js"></script>
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/child.js"></script>
<script>
    var tableCtrl = new TableCtrl(
        Url.baseService.taskPageByKeyword,
        Url.baseService.taskDetail,
        undefined, undefined, undefined,
        function (template, record, index) {
            var statusClass = "bg-warning";
            switch (record.status) {
                case "PENDING": statusClass = "bg-warning"; break;
                case "RUNNING": statusClass = "bg-info"; break;
                case "SUCCESS": statusClass = "bg-success"; break;
                case "ERROR": statusClass = "bg-warning"; break;
                default: statusClass = "bg-warning"; break;
            }
            return template
                .replace(new RegExp("{{index}}", "gm"), index + 1)
                .replace(new RegExp("{{id}}", "gm"), record.id)
                .replace(new RegExp("{{name}}", "gm"), record.name)
                .replace(new RegExp("{{description}}", "gm"), record.description)
                .replace(new RegExp("{{startDate}}", "gm"), record.startDate ? record.startDate : "")
                .replace(new RegExp("{{finishDate}}", "gm"), record.finishDate ? record.finishDate : "")
                .replace(new RegExp("{{cost}}", "gm"), record.cost ? record.cost / 1000 : "")
                .replace(new RegExp("{{statusClass}}", "gm"), statusClass)
                .replace(new RegExp("{{status}}", "gm"), record.statusValue)
                .replace(new RegExp("{{owner}}", "gm"), record.owner ? record.owner.userName : "")

        },
        function () {
            return undefined;
        }
    );

    tableCtrl.detailTemplate;
    tableCtrl.getDetailTemplate = function () {
        this.detailTemplate = $("#detail-more").prop("innerHTML");
        $("#detail-more").html("");
    }
    tableCtrl.showDetail = function (id) {
        var url = "cloud/html/task-detail.html?id=" + encodeURIComponent(id);
        var uuid = Math.random().toString(36).slice(-8);
        parent.window.frameCtrl.windowCtrl.open(uuid, "异步任务详情", url);
    }
    tableCtrl.extraBind = function() {
        var self = this;
        $("#table").on("click", ".detail", function () {
            var id = $(this).attr("data-id");
            self.showDetail(id);
        });
    }

    tableCtrl.getTemplate();
    tableCtrl.getDetailTemplate();
    tableCtrl.getRecords();
    tableCtrl.bindEvent();

    var listener = function (event) {
        if (event.type !== "LOG") {
            $("#search").click();
        }
    };
    listener.owner = window.location.href;
    parent.window.frameCtrl.websockerCtrl.taskListener.push(listener);
</script>

</body>
</html>